<template>
  <div ref="id" class="id">
    <div ref="fpsd"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import Stats from "three/addons/libs/stats.module.js";
import * as THREE from "three";

console.log("查看当前屏幕设备像素比", window.devicePixelRatio);
// three不能使用ref,reactive来保存变量，不然会报错
// 场景
// const scene = ref();
let scene = new THREE.Scene();

// 物体
// let geometry = new THREE.SphereGeometry(2);
let geometry = new THREE.BufferGeometry();

const normals = new Float32Array([
  0,
  0,
  10, //顶点1法线( 法向量 )
  0,
  0,
  10, //顶点2法线
  0,
  0,
  10, //顶点3法线
  0,
  0,
  10, //顶点4法线
  0,
  0,
  10, //顶点5法线
  0,
  0,
  10, //顶点6法线
]);
// 设置几何体的顶点法线属性.attributes.normal
geometry.attributes.normal = new THREE.BufferAttribute(normals, 3);

let vertices = new Float32Array([
  0, 0, 0, 0, 5, 0, 5, 5, 0, 0, 0, 0, 5, 5, 0, 5, 0, 0,
]);
const attribue = new THREE.BufferAttribute(vertices, 3);
geometry.attributes.position = attribue;
// 材质
// const material = ref();
let material = new THREE.LineBasicMaterial({});

// 将物体和材质融合的东西
// const mesh = ref();
let mesh1 = new THREE.Line(geometry, material);

mesh1.position.set(0, 0, 0);
// 将融合后的东西，设置了一些参数添加到场景里去
scene.add(mesh1);

// 显示坐标
let axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);

// 光源
const pointLight = new THREE.SpotLight(0xffffff);
pointLight.position.set(10, 10, 10);
scene.add(pointLight);

// 创建相机
// const camera = ref();
let camera = new THREE.PerspectiveCamera();
camera.position.set(10, 10, 10);
// 相机指向那个地方
camera.lookAt(0, 0, 0);

// 渲染引擎
// const renderer = ref();
let renderer = new THREE.WebGLRenderer({
  // antialias: true,
});

renderer.setSize(window.innerWidth, window.innerHeight);
renderer.render(scene, camera);

// 让内容可以旋转，缩放
const controls = new OrbitControls(camera, renderer.domElement);
// 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
controls.addEventListener("change", function () {
  renderer.render(scene, camera); //执行渲染操作
});

// 可以获取到帧数
const fps = new THREE.Clock();
const fpss = ref(0);

// three自带的帧率显示什么的
const stats = new Stats();

const fpsd = ref();

// 动画 利用requestAnimationFrame
// function render() {
//   stats.update();
//   const spt = fps.getDelta() * 1000;
//   fpss.value = (1000 / spt).toFixed(0);
//   renderer.render(scene, camera);

//   mesh1.rotateY(0.01);

//   window.requestAnimationFrame(render);
// }
// render();

const id = ref();
onMounted(() => {
  id.value.style = fpsd.value.appendChild(stats.domElement);
  id.value.appendChild(renderer.domElement);
});
</script>
